<template>
  <view class="safe-area-inset-bottom">
    <!-- 顶部自定义导航 -->
    <uni-nav-bar :fixed="true" backgroundColor="#00a660" color="#fff" height="90rpx">
      <block slot="left">
        <i class="iconfont nav_backIcon" @click="back">&#xe8b8;</i>
        <span style="font-size: 30rpx;">印章详情</span>
      </block>
      <block slot="right">
        <view class="nav_btn">
          <button
              v-if="dataDetails.isDefault == 0  && dataDetails.status == 1"
              @click="toDefaultSeal"
              class="nextBtn"
              size="mini"
          >设为默认
          </button>
          <button
              v-if="dataDetails.isDefault == 0 && dataDetails.status == 1"
              class="nextBtn"
              size="mini"
              @click="toDisableSeal"
          >停用
          </button>
          <button
              v-if="dataDetails.isDefault == 0 && dataDetails.status == 0"
              class="backBtn"
              size="mini"
              @click="toEnableSeal"
          >启用
          </button>
          <button
              v-if="dataDetails.isDefault == 0 && dataDetails.status != 1"
              class="nextBtn"
              size="mini"
              @click="toDeleteSeal"
          >删除
          </button>
        </view>
      </block>
    </uni-nav-bar>
    <!-- 印章详细 -->
    <view class="seal_page">
      <!-- 名称 -->
      <view class="title">
        <h3>{{ dataDetails.name }}</h3>
        <uni-icons type="compose" style="color: #00a660;" size="22" @click="toModifySealNameDialog()"></uni-icons>
      </view>
      <!-- 详细 -->
      <view class="seal_field">
        <view class="swiplist">
          <!-- 印章图片 -->
          <img :src="'data:image/png;base64,' + dataDetails.image" alt="" class="sealImg" @click="previewPic">
          <!-- 分割线 -->
          <view class="line"></view>
          <view style="text-align: center;margin-right: 30rpx;">
            <view style="color: #00a660;font-size: 60rpx;margin: 10rpx 0;">{{ dataDetails.contractCount }}</view>
            <span class="header">用印合同数</span>
          </view>
        </view>
        <p class="desc">
          <span class="header">默认印章：</span>
          <uni-tag text="是" type="success" v-if="dataDetails.isDefault == 1"/>
          <uni-tag text="否" type="success" v-else/>
        </p>
        <p class="desc">
          <span class="header">印章类型：</span>
          <span v-if="dataDetails.isSystem == 1" style="color: #00a660;">{{ dataDetails.sealTypeName }}</span>
          <span v-else>{{ dataDetails.sealTypeName }}</span>
          <uni-icons type="compose" style="color: #00a660;margin-left: 15rpx;" size="20"
                     @click="toModifySealTypeDialog()"/>
        </p>
        <p class="desc">
          <span class="header">印章规格：</span>
          <template v-if="sealSpec != null">
            <span v-if="sealSpec.shapeType == 0">
              圆形（直径 {{ sealSpec.mmWidth }}mm）
            </span>
            <span v-else-if="sealSpec.shapeType == 1">
              椭圆形（{{ sealSpec.mmWidth }}mm x {{ sealSpec.mmHeight }}mm）
            </span>
            <span v-else-if="sealSpec.shapeType == 2">
              正方形（{{ sealSpec.mmWidth }}mm x {{ sealSpec.mmHeight }}mm）
            </span>
            <span v-else>
              自定义（{{ sealSpec.mmWidth }}mm x {{ sealSpec.mmHeight }}mm）
            </span>
          </template>
        </p>
        <p class="desc"><span class="header">印章归属：</span>{{ dataDetails.companyName }}</p>
        <p class="desc"><span class="header">印章编号：</span>{{ dataDetails.sealNumber }}</p>
        <p class="desc"><span class="header">创建时间：</span>{{ dataDetails.createTime }}</p>
        <p class="desc">
          <span class="header">初始印章：</span>
          <uni-tag text="是" type="success" v-if="dataDetails.isSystem == 1"/>
          <uni-tag text="否" type="success" v-else/>
        </p>
      </view>
      <!-- 导航菜单 -->
      <view class="swiplist">
        <swiperTabHead :tabBars="tabList" :tabIndex="tabIndex" @tabtap="handleTabChange"/>
      </view>
    </view>
    <!-- 列表 -->
    <view>
      <!-- 印章授权 -->
      <view v-show="tabIndex == 0">
        <detail-staff-seal ref="detailStaffSeal" :seal-id="parseInt(id)" :data-details="dataDetails"/>
      </view>
      <!-- 授权记录 -->
      <view v-show="tabIndex == 1">
        <detail-auth-record ref="detailAuthRecord" :seal-id="parseInt(id)"/>
      </view>
      <!-- 用印记录 -->
      <view v-show="tabIndex == 2">
        <detail-use-record ref="detailUseRecord" :seal-id="parseInt(id)"/>
      </view>
      <!-- 变更记录 -->
      <view v-show="tabIndex == 3">
        <detail-edit-record ref="detailEditRecord" :seal-id="parseInt(id)"/>
      </view>
    </view>
    <!-- 修改印章弹出框 -->
    <detail-modify-seal ref="detailModifySeal" :seal-id="parseInt(id)" @success="getSealCompanyInfo"/>
  </view>
</template>

<script>
import detailStaffSeal from "./detailStaffSeal";
import detailAuthRecord from "./detailAuthRecord";
import detailUseRecord from "./detailUseRecord";
import detailEditRecord from './detailEditRecord'
import detailModifySeal from './detailModifySeal'
import swiperTabHead from "@/components/slideTab/slideTab"
import luanqingEmpty from '@/components/luanqing-empty/luanqing-empty';
import {
  delSealCompany,
  getSealCompany,
  updateSealCompanyDefault,
  updateSealCompanyStatus
} from "@/api/ec/console/seal/sealCompany";
import {getSealSpec} from "@/api/ec/console/seal/sealSpec";
import {listByCompanyId} from "@/api/ec/console/seal/sealType";

export default {
  components: {
    swiperTabHead,
    luanqingEmpty,
    detailStaffSeal,
    detailAuthRecord,
    detailUseRecord,
    detailEditRecord,
    detailModifySeal
  },
  data() {
    return {
      // 印章id
      id: null,
      // 详情数据
      dataDetails: {},
      // 印章类型
      sealTypeList: [],
      // 印章规格
      sealSpec: null,
      // tab标签
      tabList: [{title: '授权管理'}, {title: '授权记录'}, {title: '用印记录'}, {title: '变更记录'}],
      // 当前选中
      tabIndex: 0,
    }
  },
  onLoad(option) {
    this.id = option.id;
  },
  /** 上拉刷新回调 */
  onReachBottom() {
    if (this.tabIndex == 0) {
      this.$refs.detailStaffSeal.loadMore();
    } else if (this.tabIndex == 1) {
      this.$refs.detailAuthRecord.loadMore();
    } else if (this.tabIndex == 2) {
      this.$refs.detailUseRecord.loadMore();
    } else {
      this.$refs.detailEditRecord.loadMore();
    }
  },
  created() {
    this.getSealType();
    this.getSealCompanyInfo();
  },
  methods: {
    back() {
      uni.navigateBack({delta: 1});
      uni.$emit("refreshSealDisable", 1);
      uni.$emit("refreshSealCommon", 1);
    },
    /** 查询印章类型列表 */
    getSealType() {
      listByCompanyId().then(response => {
        this.sealTypeList = response.data
      });
    },
    /** 获取印章详情 */
    getSealCompanyInfo() {
      this.$modal.loading();
      getSealCompany(this.id).then(response => {
        uni.hideLoading();
        this.dataDetails = response.data;
        // 获取印章规格信息
        this.getSealSpecInfo();
        // 默认加载第一个tab数据
        this.$refs.detailStaffSeal.handleQuery();
      }).catch(() => {
        uni.hideLoading();
      });
    },
    /** 获取印章规格信息 */
    getSealSpecInfo() {
      getSealSpec(this.dataDetails.sealSpecId).then(response => {
        this.sealSpec = response.data;
      });
    },
    /** 设置默认印章 */
    toDefaultSeal() {
      let id = this.dataDetails.id;
      let isDefault = 1;
      const param = {id, isDefault}
      updateSealCompanyDefault(param).then(() => {
        this.getSealCompanyInfo();
        this.$modal.msgSuccess("默认签名设置成功！");
      }).catch(() => {
        this.$modal.msgError("默认签名设置失败，请稍后重试！")
      });
    },
    /** 启用印章 */
    toEnableSeal() {
      let that = this
      uni.showModal({
        title: '系统提示',
        confirmColor: '#00a660',
        content: '您确认要启用印章吗？印章启用后，用印方将可以使用该印章签署合同。',
        success: function (res) {
          if (res.confirm) {
            let id = that.dataDetails.id;
            let status = 1;
            const param = {id, status}
            updateSealCompanyStatus(param).then(() => {
              that.getSealCompanyInfo();
              that.$modal.msgSuccess("印章启用成功");
            })
          } else if (res.cancel) {
          }
        }
      })
    },
    /** 停用印章 */
    toDisableSeal() {
      let that = this
      uni.showModal({
        title: '系统提示',
        confirmColor: '#00a660',
        content: '您确认要停用该印章吗？停用后，该印章所有授权将失效且无法签署合同。',
        success: function (res) {
          if (res.confirm) {
            let id = that.dataDetails.id;
            let status = 0;
            const param = {id, status}
            updateSealCompanyStatus(param).then(() => {
              that.getSealCompanyInfo();
              that.$modal.msgSuccess("印章停用成功");
            })
          } else if (res.cancel) {
          }
        }
      })
    },
    /** 删除签名信息 */
    toDeleteSeal() {
      let that = this
      uni.showModal({
        title: '系统提示',
        confirmColor: '#00a660',
        content: '确定要删除 "' + that.dataDetails.name + '" 吗？',
        success: function (res) {
          if (res.confirm) {
            if (that.dataDetails.contractCount > 0) {
              that.$modal.msgError("该印章已被使用，暂无法删除！")
              return;
            }
            delSealCompany(that.dataDetails.id).then(() => {
              uni.showToast({
                title: '印章删除成功'
              });
              setTimeout(() => {
                uni.$emit('refreshData');
                that.back()
              }, 300)
            }).catch(() => {
              that.$modal.msgError("印章删除失败，请稍后重试！")
            });
          } else if (res.cancel) {
          }
        },
      })
    },
    /** 预览图片 */
    previewPic() {
      uni.previewImage({urls: ['data:image/png;base64,' + this.dataDetails.image], current: 0});
    },
    /** 接受子组件传过来的值点击切换导航 */
    handleTabChange(index) {
      // 标记已选项
      this.tabIndex = index;
      // 查询数据列表
      this.handleQuery();
    },
    /** 搜索 */
    handleQuery() {
      this.$nextTick(() => {
        if (this.tabIndex == 0) {
          this.$refs.detailStaffSeal.handleQuery();
        } else if (this.tabIndex == 1) {
          this.$refs.detailAuthRecord.handleQuery();
        } else if (this.tabIndex == 2) {
          this.$refs.detailUseRecord.handleQuery();
        } else {
          this.$refs.detailEditRecord.handleQuery();
        }
      })
    },
    /** 修改印章名称弹出框 */
    toModifySealNameDialog() {
      this.$refs.detailModifySeal.toOpenModifySealNameDialog(this.dataDetails);
    },
    /** 修改印章类型弹出框 */
    toModifySealTypeDialog() {
      this.$refs.detailModifySeal.toOpenModifySealTypeDialog(this.dataDetails, this.sealTypeList);
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep .uni-navbar__header-btns-left {
  width: 220rpx !important;
}

::v-deep .uni-navbar__header-btns-right {
  width: 420rpx !important;
}

.pos-block {
  position: relative;
  height: calc(100vh - 900rpx);
}

// 搜索按钮
.search_btn {
  margin-right: 0;
  background: #e6f6ef;
  color: $uni-color-primary;
  border: 1rpx solid #99dbbf;
  font-size: 26rpx;
  line-height: 65rpx;
  margin-left: 20rpx;
  flex: 0.5;
}

.grid-line {
  height: 1rpx;
  width: 100%;
  background: #777;
  margin: 16rpx 0;
}

.bor_add {
  text-align: center;
  color: $uni-color-primary;

  span {
    margin-left: 5rpx;
  }
}

.line {
  height: 150rpx;
  content: '';
  width: 1rpx;
  background: #ccc;
}

.delete {
  display: flex;
  align-items: center;
  color: #999999;
  font-size: 28rpx;
}

// ::v-deep .uni-popup .uni-popup__wrapper{width: 90%;}
// ::v-deep .uni-popup-dialog{width: 100%;}
::v-deep .dropdown-item__content .list {
  right: 25rpx;
}

.swiplist {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header {
  color: #9ea0a3;
}

.seal_page {
  padding: 30rpx 30rpx 0 30rpx;
  background: #fff;
}

.sealImg {
  width: 35%;
  height: auto;
  border: 1rpx solid #e6e8ea;
  border-radius: 5rpx;
  margin: 15rpx 0;
  padding: 15rpx;
}

.desc {
  line-height: 48rpx;
}

.title {
  display: flex;
  align-items: center;
  //justify-content: space-between;

  h3 {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1; //显示行数
    white-space: nowrap;
    margin-right: 15rpx;
    //width: 75%;
  }
}
</style>
